@import '../CSS/common.scss';

$container-padding: 8px;

@mixin flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

body {
  margin: 0;
  padding: 8px;
  * {
    box-sizing: border-box;
  }
  @include slim-scroll();
}

.settings {
  display: inline-block;
  width: calc(25% - 4px);
  padding: 4px;
  input[type='number'] {
    width: 48px;
  }
}

.container {
  @include generalContainer();
  padding: $container-padding;
}

.btn {
  display: inline-block;
  padding: 1rem 0;
  background-color: hsl(200, 100, 92);
  border-radius: 0.25rem;
  box-shadow: 0.1rem 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  user-select: none;
  cursor: pointer;
  transition: background-color 120ms, box-shadow 120ms;
  &:hover {
    background-color: hsl(200, 100, 97);
    box-shadow: 0.1rem 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.2);
  }
  &:active {
    background-color: hsl(200, 100, 87);
    box-shadow: 0 0 0.15rem 0 rgba(0, 0, 0, 0.35);
  }
}

$layout-name: xs, sm, md, lg;
$layout-width: 1px, 700px, 1000px, 1400px;
#flex-container {
  @include flex-wrap();
  @each $ln in $layout-name {
    @media screen and (min-width: nth($layout-width, index($layout-name, $ln))) {
      // 使用 gap 实现
      // 优点：简单
      // 缺点：兼容性不佳，比如 IE 和 QQ 浏览器不兼容
      &.gap {
        gap: var(--#{$ln}-gap);
        .btn {
          // 宽度 = 100% ÷ 列数 - 间隙 × ( 列数 - 1 ) ÷ 列数
          width: calc(
            100% / var(--#{$ln}-col) - var(--#{$ln}-gap) *
              (var(--#{$ln}-col) - 1) / var(--#{$ln}-col)
          );
        }
      }
      // 使用 margin 实现
      // 优点：兼容性好
      // 缺点：复杂，需要操作父元素的内边距
      //       当间隙大于父元素左右内边距的两倍时，子元素会受压缩
      //       当间隙大于父元素下侧内边距时，父元素会被拉长
      // 缺点2：如果要兼容 IE 则需要将 calc 中的 var() 全部替换成字面量
      &.margin {
        padding: $container-padding // 示例中内边距固定为 8 px
          calc(#{$container-padding} - var(--#{$ln}-gap) / 2)
          calc(#{$container-padding} - var(--#{$ln}-gap));
        .btn {
          // 宽度 = 100% ÷ 列数 - 间隙
          width: calc(100% / var(--#{$ln}-col) - var(--#{$ln}-gap));
          margin: 0 calc(var(--#{$ln}-gap) / 2) var(--#{$ln}-gap);
        }
      }
    }
  }
}
